<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="root">
			姓名：<input type="text" v-model="user.name"></br>
			年龄：<input type="text" v-model="user.age"></br>
			地址：<input type="text" v-model="user.contact.address"></br>
			电话：<input type="text" v-model="user.contact.phone"></br>
		</div>
		
		<script type="text/javascript">
			const vm = new Vue({
				el: "#root",
				data: {
					user: {
						name: 'zhangsan',
						age: 20,
						contact: {
							address: '二仙桥',
							phone: '1370707007'
						}
					}
				},
				watch: {
					// 监视 user.name属性
					'user.name': {
						immediate: true,
						handler(newValue,preValue){
							console.log('user.name 属性被修改了')
						}
					}
					// 监视 user.contact 属性
					'user.contact': {
						// 深度监视：如果该属性还有下层属性，配置 deep 为true可以监视到下层属性的变化
						// 这样，当 user.contact.address 或者 user.contact.phone 发生变化，就能监测到
						deep: true,
						immediate: true,
						handler(newValue,preValue){
							console.log('user.contact 属性被修改了')
						}
					}
				}
			})
			// 深度监视整个user属性
			vm.$watch('user',{
				immediate: true,
				handler(newValue,preValue){
					console.log('user 属性被修改了')
				}
			})
		</script>
	</body>
</html>